<template>
  <div class="shareList">
    <nav-bar title="面经分享" path="/home/find"> </nav-bar>
    <div class="content">
      <!-- 搜索框组件 -->
      <van-search
        v-model="serachValue"
        show-action
        placeholder="请输入搜索内容"
        @search="onSearch"
        @cancel="onCancel"
        class="search"
      ></van-search>
      <!-- 上拉刷新
       v-model:上拉不处于加载中（滚动条距离底线小于300时,自动变为true） -->
      <div v-if="showList">
        <van-list
          v-if="bol"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="load"
        >
          <!-- 列表 -->
          <shareItem
            v-for="(item, index) in list"
            :key="index"
            :info="item"
          ></shareItem>
        </van-list>
      </div>
      <div v-else>
        <h3 class="title mp28">大家都在搜</h3>
        <van-tag
          @click="tagClick(item)"
          color="#f7f4f5"
          text-color="#848598"
          class="tag"
          v-for="(item, index) in hotList"
          :key="index"
          >{{ item }}</van-tag
        >

        <van-cell center>
          <template #title>
            <div class="title">
              历史搜索
            </div>
          </template>
          <template #default>
            <div class="value" @click="clear">
              清空
            </div>
          </template>
        </van-cell>
        <van-tag
          @click="tagClick"
          color="#f7f4f5"
          text-color="#848598"
          class="tag"
          v-for="(item, index) in historyList"
          :key="index"
          >{{ item }}</van-tag
        >
      </div>
    </div>
  </div>
</template>

<script>
import shareItem from './shareItem'
import { articlesShare, articlesTechnicTopSearch } from '@/api/find.js'
import { setLocal, getLocal, removeLocal } from '@/utils/local'
export default {
  name: 'shareList',
  data () {
    return {
      bol: true,
      serachValue: '',
      list: [],
      loading: false,
      finished: false,
      currentPage: 1, // 当前页码
      pageSize: 2, // 每页多少条
      showList: true,
      hotList: [], // 热词搜索
      historyList: JSON.parse(getLocal('historyList')) || [] // 历史搜索 前面为真,不往后面执行,前面不为真,直接使用后面的
    }
  },
  components: {
    shareItem
  },
  // async created () {
  //   const res = await articlesShare()
  //   console.log(res)
  //   this.list = res.data.data.list
  // },
  methods: {
    // 回车搜索
    onSearch () {
      this.list = []
      this.loading = false
      this.finished = false
      this.currentPage = 1
      // 静默刷新
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
      this.showList = true
      // 1:不能为空  2:不能重复  3:后面添加的,要放到最前面
      if (this.serachValue.trim() !== '') {
        this.historyList.unshift(this.serachValue)
        // 去重
        this.historyList = [...new Set(this.historyList)]
        // 只要前五条
        this.historyList.splice(5)
        // 保存到本地  需要转换成数组
        setLocal(JSON.stringify(this.historyList), 'historyList')
      }
    },
    // 点击取消
    async onCancel () {
      // console.log('onCancel')
      this.showList = false
      if (!this.hotList.length) {
        const res = await articlesTechnicTopSearch()
        console.log(res)

        this.hotList = res.data.data
      }
    },
    // 上拉加载
    async load () {
      // 调用接口需要传递的参数
      const res = await articlesShare({
        start: (this.currentPage - 1) * this.pageSize,
        limit: this.pageSize,
        q: this.serachValue
      })
      this.currentPage++
      // 数据累加
      if (this.serachValue.trim() !== '') {
        res.data.data.list.forEach(item => {
          item.title = item.title
            .split(this.serachValue)
            .join(`<span style="color:red">${this.serachValue}</span>`)
        })
      }
      this.list.push(...res.data.data.list)
      // 修改v-model的值为false
      this.loading = false
      // 判断所有数据是否加载完成。如果加载完成就修改finished的值为true
      if (this.list.length >= res.data.data.total) {
        this.finished = true
      }
    },
    // 热词搜索点击输入框显示
    tagClick (str) {
      this.serachValue = str
      this.onSearch()
    },
    // 清空历史搜索
    clear () {
      this.historyList = []
      removeLocal()
    }
  }
}
</script>
<style lang="less">
.shareList {
  .content {
    padding: 0 @p15;
    .search {
      padding-left: 0;
      padding-right: 0;
    }
    .title {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      color: #222222;
      line-height: 25px;
      letter-spacing: 0px;
    }
    .mp28 {
      margin-top: 32px;
      margin-bottom: 15px;
    }
    .tag {
      padding: 5px 8px;
      margin-right: 15px;
      margin-bottom: 15px;
    }
    .van-cell {
      padding-left: 0;
      padding-right: 0;
    }
  }
}
</style>
